'use client';

import type { TMetadata } from '@/types';
import { NavbarPage } from '@/app/[locale]/navbar';
import FooterPage from '@/app/[locale]/footer';
import { useTranslations } from 'use-intl';

export default function PrivacyPolicyPage({
  metadata,
}: {
  metadata: TMetadata;
}) {
  return (
    <>
      <NavbarPage metadata={metadata} />
      <PrivacyPolicy metadata={metadata} />
      <FooterPage metadata={metadata} />
    </>
  );
}

const PrivacyPolicy = ({ metadata }: { metadata: TMetadata }) => {
  const t = useTranslations('PrivacyPolicyPage');
  const env = metadata.env;

  return (
    <div className="card border-0">
      <div className="card-body">
        <p className="lead fw-bold text-center my-5">{t('privacyPolicy')}</p>

        <div className="ps-3 pe-2">
          <p className="my-3 fw-bold">一、{t('overview')}</p>
          <ol>
            <li className="my-2">{t('overviewList.li1')}</li>
            <li className="my-2">{t('overviewList.li2')}</li>
          </ol>
        </div>

        <div className="ps-3 pe-2">
          <p className="my-3 fw-bold">二、{t('howWeCollectInfo')}</p>
          <ol>
            <li className="my-2">{t('howWeCollectInfoList.li1')}</li>
            <li className="my-2">{t('howWeCollectInfoList.li2')}</li>
          </ol>
        </div>

        <div className="ps-3 pe-2">
          <p className="my-3 fw-bold">三、{t('howWeUseTechnologies')}</p>
          <ol>
            <li className="my-2">{t('howWeUseTechnologiesList.li1')}</li>
            <li className="my-2">{t('howWeUseTechnologiesList.li2')}</li>
          </ol>
        </div>

        <div className="ps-3 pe-2">
          <p className="my-3 fw-bold">四、{t('howWeStoreAndProtectInfo')}</p>
          <ol>
            <li className="my-2">{t('howWeStoreAndProtectInfoList.li1')}</li>
            <li className="my-2">{t('howWeStoreAndProtectInfoList.li2')}</li>
            <li className="my-2">
              {t('howWeStoreAndProtectInfoList.li3', { appName: env.APP_NAME })}
            </li>
            <li className="my-2">
              {t('howWeStoreAndProtectInfoList.li4', { appName: env.APP_NAME })}
            </li>
          </ol>
        </div>

        <div className="ps-3 pe-2">
          <p className="my-3 fw-bold">五、{t('howWeUseInfo')}</p>
          <ol>
            <li className="my-2">{t('howWeUseInfoList.li1')}</li>
            <li className="my-2">{t('howWeUseInfoList.li2')}</li>
          </ol>
        </div>

        <div className="ps-3 pe-2">
          <p className="my-3 fw-bold">六、{t('howWeProvideInfoToOthers')}</p>
          <ol>
            <li>{t('howWeProvideInfoToOthersList.li1')}</li>
            <li className="my-2">{t('howWeProvideInfoToOthersList.li2')}</li>
            <li className="my-2">{t('howWeProvideInfoToOthersList.li3')}</li>
          </ol>
        </div>

        <div className="ps-3 pe-2">
          <p className="my-3 fw-bold">七、{t('howYouExerciseYourRights')}</p>
          <ol>
            <li className="my-2">{t('howYouExerciseYourRightsList.li1')}</li>
            <li className="my-2">{t('howYouExerciseYourRightsList.li2')}</li>
            <li className="my-2">{t('howYouExerciseYourRightsList.li3')}</li>
            <li className="my-2">{t('howYouExerciseYourRightsList.li4')}</li>
          </ol>
        </div>

        <div className="ps-3 pe-2">
          <p className="my-3 fw-bold">八、{t('thirdPartyResponsibility')}</p>
          <ol>
            <li className="my-2">
              {t('thirdPartyResponsibilityList.li1', { appName: env.APP_NAME })}
            </li>
            <li className="my-2">
              {t('thirdPartyResponsibilityList.li2', { appName: env.APP_NAME })}
            </li>
          </ol>
        </div>

        <div className="ps-3 pe-2">
          <p className="my-3 fw-bold">九、{t('applicabilityAndUpdates')}</p>
          <ol>
            <li className="my-2">
              {t('applicabilityAndUpdatesList.li1', { appName: env.APP_NAME })}
            </li>
            <li>{t('applicabilityAndUpdatesList.li2')}</li>
          </ol>
        </div>
      </div>
    </div>
  );
};
